<template>
    <div class="homeWarp">
        <!-- 二级路由配置 -->
        <el-menu :default-active="myMenuActive" class="el-menu-demo" mode="horizontal" background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
            <template v-for="item in homeMenu" :key="item.key">
                <el-menu-item v-if="!item.childrenchildren" :index="item.path">{{ item.title }}</el-menu-item>

                <el-sub-menu v-if="item.childrenchildren && item.childrenchildren.length > 0" :index="item.path">
                    <template #title>{{ item.title }}</template>
                    <el-menu-item v-for="items in item.childrenchildren" :key="items.key" :index="items.path">item one</el-menu-item>
                </el-sub-menu>
            </template>
        </el-menu>
        <div class="homeContentWarp">
            <RouterView />
        </div>
    </div>
</template>

<script setup>
import { homeMenu } from '/@/router/menu/menu';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue'
const router = useRouter();
const myMenuActive = ref('hpage')
const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
    myMenuActive.value = key;
    // const login = window.localStorage.getItem('myv3applogin');
    //登陆状态下再存储，防止callBack跳转错误
    // if(login==='logined'){
        window.localStorage.setItem('myMenuActive',myMenuActive.value);
    // }
    let path = '/home'
    keyPath.forEach((item)=>{
        path+=`/${item}`
    })
    router.push(path)
}
onMounted(()=>{
    //组件加载完毕，若有保存前页面状态，回现页面样式
    const localMenuActive = window.localStorage.getItem('myMenuActive');
    if(localMenuActive){
        myMenuActive.value = localMenuActive;
    }
})
</script>

<style lang="less" scoped>
.homeWarp{
    width: 100%;
    height: 100%;
}
.homeContentWarp{
    width: 100%;
    height: calc(100vh - 59px);
}
//  :global{
//         .box{
//          text-align: center;
//         }
//     }
</style>